<template>
	<view class="mine">
		<!-- <u-navbar  :leftIconColor="titleColor" :border-bottom="false" :bgColor="'transparent'"></u-navbar> -->
		<view class="profily">
			<view class="base">
				<u-avatar :src="userInfo.avatar" @click="avatarPreview(avatarUrl)" />
				<view class="nick">
					<text style="font-size: 36rpx; font-weight: bold;">
						{{userInfo.username}}
					</text>
				</view>
			</view>
			<view class="balance-ticket u-flex">
				<view class="balance-area">
					<view class="balance-num">
						<text>{{sumUserBalance}}</text>元
					</view>
					<text>我的余额</text>
				</view>
				<view class="ticket-area" @click="goPage('/pages/subPack/discounts/details?nav=0')">
					<view class="balance-num">
						<text>{{userCouponNum}}</text>张
					</view>
					<text>优惠卡券</text>
				</view>
			</view>
			<view class="join-area" @click="goPage('/pages/subPack/userPage/toJoin')">
				<view class="join-text">
					合伙人招募令
				</view>
				<view class="join-btn">
					立即加入
				</view>
			</view>
			<view class="order_status">
				<view class="order_num">
					我的服务
				</view>
				<view class="order_menu u-flex">
					<view v-for="(item,index) in status" :key="index" @click="topMenusClick(item)">
						<view class="status">
							<image class="icon" :src="item.image" mode="aspectFit" />
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="确定" content="确定要退出登录吗"
				@confirm="dialogConfirm" @close="dialogClose">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
	import { getUserStat,
			 getUserInfo, 
			 getMenuUser, 
			 wxappAuth, 
			 bindingPhone, 
			 wxappBindingPhone, 
			 wxappGetUserInfo,
			 getUserGradeByUserId } from '@/api/user'
	import { isWeixin, VUE_APP_RESOURCES_URL, parseQuery, getProvider } from '@/utils'	
		import {
			//UserInfo,
			UserPageKefu
		} from "../../utils/request/gather.js"
	import Authorization from '@/pages/authorization/index'	
	export default {
		data() {
			return {
				titleColor:'#333333',
				token: 'winston',
				avatarUrl: '',
				nickName: 'Winston Yv',
				idAuth: '1817212',
				userCouponNum:0,
				sumUserBalance:0,
				mtStaff:{},
				userGradeName:"",
				userGradeDiscount:10,
				status: [{
						image: '../../static/mine/do-explain.png',
						title: '操作指引',
						url: '/page_mine/guidance/guidance',
						pageType: '1',
						cardType: 2
					},
					{
						image: '../../static/mine/vedio-icon.png',
						title: '精彩时刻',
						url: '/page_mine/mineVedio/mineVedio',
						pageType: '0',
						cardType: 2
					},
					{
						image: '../../static/mine/help-icon.png',
						title: '帮助中心',
						url: '/page_mine/helpCenter/helpCenter',
						pageType: '0',
						cardType: 0
					},
					{
						image: '../../static/mine/reg-teacher.png',
						title: '申请助教',
						url: '/page_business/applyAssistant/applyAssistant',
						pageType: '0',
						cardType: 1
					},
					{
						image: '../../static/mine/invite-icon.png',
						title: '邀请好友',
						url: '/page_mine/commonSolution/commonSolution',
						pageType: '0',
						cardType: 2
					},
					{
						image: '../../static/mine/join-us.png',
						title: '加入我们',
						url: '/pages/subPack/userPage/toJoin',
						// url: '/page_mine/commonSolution/commonSolution',
						pageType: '0',
						cardType: 2
					},
					{
						image: '../../static/mine/advice.png',
						title: '意见建议',
						// url: '/page_mine/suggest/suggest',
						url: '/pages/subPack/userPage/commonProblem',
						pageType: '0',
						cardType: 2
					},
					{
						image: '../../static/mine/agrement.png',
						title: '协议',
						url: '/page_mine/commonSolution/commonSolution',
						pageType: '0',
						cardType: 2
					},
				],
				

			};
		},
		computed: mapGetters(['userInfo']),
		onLaunch() {
			//this.token = uni.getStorageSync('Authority')
			// this.nickName = uni.getStorageSync('nickname')
			// this.avatarUrl = uni.getStorageSync('avatarUrl')
		},
		async onLoad() {
			//this.token = uni.getStorageSync('Authority')
			

		},
		onShow() {
			console.log("onShow")
			this.userStat();
			
			// 获取用户会员对应的等级折扣
			this.getUserGrade();
			console.log("userInfo.uid:"+JSON.stringify(this.userInfo))
			//console.log("token:"+$store.getters.token)			
		},
		onShareAppMessage(res) {
			if (res.form === 'button') {
				return {
					title: '一起预约越船自主台球娱乐中心',
					path: '/pages/index/index',
					fail: function() {
						this.showMessage("分享失败", "error")
					},
					success: function() {
						this.showMessage("分享成功", "success")
					},
				}
			}
		},
		methods: {
			userStat(){
				let param = {
					userId:this.userInfo.uid
				}
				getUserStat(param).then(res => {
					var userCouponNum = res.data.userCouponNum;
					var sumUserBalance = res.data.sumUserBalance;
					var mtStaff = res.data.mtStaff;
					this.userCouponNum =  userCouponNum;
					this.sumUserBalance = sumUserBalance;
					this.mtStaff = mtStaff;
					console.log("mtStaff:"+JSON.stringify(mtStaff));
				})
			},
			getUserGrade(){
				let param = {}
				getUserGradeByUserId(param).then(res => {
					
					var mtUserGrade = res.data.mtUserGrade;
					if(mtUserGrade!=null){
						this.userGradeName = mtUserGrade.name;
						this.userGradeDiscount = mtUserGrade.discount;
					}
				})	
			},
			gotoMyBusiness() {
				uni.showToast({
					icon: 'none',
					title: "您当前暂无自己的门店",
					duration: 2000
				})
				// uni.navigateTo({
				//   url:"/page_business/BusinessMain/BusinessMain"
				// })
			},
			avatarPreview(avatarUrl) {
				uni.previewImage({
					current: 0,
					urls: [avatarUrl]
				})
			},
			topMenusClick(item) {
				console.log(item.pageType)
				if (item.pageType === '1') {
					if (item.cardType !== 2) {
						uni.setStorageSync('couponType', item.cardType)
					}
					uni.navigateTo({
						url: item.url
					})
					return
				}
				console.log(item.url)
				uni.navigateTo({
					url: item.url
				})
			},
			
			async dialogConfirm() {
				//退出登录
				console.log('退出登录');
				let body = new Object()
				body.openid = getApp().globalData.openid
				let data = await getApp().UniRequest("/user/logout", "GET", body, "", 1)
				if (data.code !== 20000) {
					return uni.showToast({
						title: '数据请求失败！',
						duration: 1500,
						icon: 'none',
					})
				}
				uni.setStorageSync("userInfo", '');
				uni.setStorageSync("Authority", '');
				uni.setStorageSync('pastDueDateNew', '')
				getApp().globalData.openid = '';
				getApp().globalData.isLogin = false;
				uni.setStorageSync("openid", '')
				this.$refs.alertDialog.close()
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			
			//跳转
			goPage(url){
				uni.navigateTo({
					url
				})
			},
		},
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	page {
		background-color: #EDEDED;
	}
	
	.mine{
		width: 100vw;
		background: url(https://qn.zqbond.com/wxmp/my-bg.png) no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		.balance-ticket{
			justify-content: space-between;
			>view{
				width: 331rpx;
				height: 120rpx;
				padding: 8rpx 24rpx;
				box-sizing: border-box;
			}
			.balance-area{
				background: url(https://qn.zqbond.com/wxmp/balance.png) no-repeat;
				background-size: 100% 100%;
				.balance-num{
					text{
						font-size: 44rpx;
						font-weight: 550;
						color: #88420F;
						margin-right: 8rpx;
					}
					font-size: 24rpx;
					color: #666666;
				}
				>text{
					font-size: 26rpx;
					font-weight: bold;
					color: #333333;
				}
			}
			.ticket-area{
				background: url(https://qn.zqbond.com/wxmp/ticket-bg.png) no-repeat;
				background-size: 100% 100%;
				.balance-num{
					text{
						font-size: 44rpx;
						font-weight: 550;
						color: #3F3A6A;
						margin-right: 8rpx;
					}
					font-size: 24rpx;
					color: #666666;
				}
				>text{
					font-size: 26rpx;
					font-weight: bold;
					color: #333333;
				}
			}
		}
		.join-area{
			width: 714rpx;
			height: 186rpx;
			background: url(https://qn.zqbond.com/wxmp/join-bg.png) no-repeat;
			background-size: 100% 100%;
			padding-left: 40rpx;
			padding-top: 30rpx;
			box-sizing: border-box;
			justify-content: center;
			margin-left: -10rpx;
			margin-top: 30rpx;
			.join-text{
				font-size: 38rpx;
				color: #FF732E;
				font-style: oblique;
				font-weight: 550;
			}
			.join-btn{
				margin-top: 16rpx;
				width: 142rpx;
				height: 46rpx;
				line-height: 46rpx;
				background: linear-gradient(90deg, #FF732E 0%, #FFB245 100%);
				border-radius: 21rpx;
				font-size: 24rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}

	.profily {
		box-sizing: border-box;
		box-shadow: 0px 2px 5px #EDEDED;
		padding: 0 30rpx;
		.base {
			display: flex;
			align-items: center;
			padding-bottom: 35rpx;
			position: relative;
			padding: 140rpx 0 40rpx 0;

			.nick {
				display: flex;
				flex-direction: column;

				text {
					margin-left: 20px;
					font-size: 30upx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;

				.myHomePage {
					position: absolute;
					top: 58rpx;
					left: 560rpx;
					display: flex;
					justify-content: flex-start;

					.text {
						margin-right: 15rpx;
					}
				}
			}

			.right:active {
				background: #f6f6f6;
			}
		}

		// .base:active {
		// 	background: #f8f8f8;
		// }
		.order_status {
			background: #ffffff;
			box-sizing: border-box;
			border-radius: 8rpx;
			padding: 20rpx 24rpx;
			margin-top: 20rpx;
			.order_num {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				color: #333333;
				font-weight: 550;
			}

			.order_menu {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				>view{
					margin-top: 30rpx;
					&:nth-child(4n){
						.status{
							margin-right: 0;
						}
					}
				}
				.status {
					font-size: 24rpx;
					text-align: center;
					display: flex;
					flex-direction: column;
					border-radius: 10px;
					margin-right: 50rpx;
					.icon {
						width: 88rpx;
						height: 88rpx;
						margin: 0 auto;
						margin-bottom: 16rpx;
					}
					
				}
			}
		}
	}

	.center-menu {
		width: 95%;
		border-radius: 30px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0 auto;
		padding: 20rpx;
		margin-top: 200rpx;

		.center-menu-item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			border-bottom: 2px solid #f6f6f6;
			height: 130rpx;

			.item {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				button {
					width: 100%;
					position: absolute;
					opacity: 0;
					z-index: 1;
				}

				.item-name {
					margin-left: 15rpx;
				}
			}
		}
	}

	.jieshao {
		text-align: -webkit-center;
		font-size: 15px;
		font-weight: 600;
		padding: 0 20rpx 0 20rpx;
		margin-top: 20rpx;
	}
</style>